import { Component, Prop, Vue } from 'vue-property-decorator';
import style from '@/styles/components/lock.module.less';
import circleSvg from '@/assets/svg/lock/circle.svg';
import circleDisabledSvg from '@/assets/svg/lock/circle-disabled.svg';

@Component({})
export default class EapLock extends Vue {
  @Prop({ default: false }) private value!: boolean;
  @Prop({ default: false }) private disabled!: boolean;

  public render() {
    return (
      <div class={style['lock']} on-click={this.switchLock}>
        <img
          class={[style['lock-circle'], this.value && style['lock-circle-open']]}
          src={this.disabled ? circleDisabledSvg : circleSvg}
          alt='circle'
        />
        <div
          class={[
            style['lock-body'],
            this.value && style['lock-body-open'],
            this.disabled && style['lock-body-disabled']
          ]}></div>
      </div>
    );
  }

  private switchLock() {
    if (this.disabled || this.value) { // 可开不可观
      return;
    }
    // this.$emit('input', !this.value);
    this.$emit('change', !this.value);
  }
}
